<template>
    <div>
        <div class="main-search">
            <input type="text" v-model="keys" placeholder="可根据订单号,昵称查询" style="background:#f5f5f5"/>
            <button @click="search">搜索</button>
        </div>
        <pull-to
        :bottom-load-method="infiniteHandler"
        :bottom-config="BOTTOM_DEFAULT_CONFIG" style="height:93vh;">
            <van-tabs v-model="active" sticky color="#1ABC9C" @change="activeChange">
                <van-tab v-for="(item,index) in type" :title='item' :key="index">
                    <ul style="background: #f5f5f5">
                        <li v-for="(item,index) in data.list" :key="index" class="dataList">
                            <div @click="toNext(item.isChoice,item.order_no)">
                                <p class="goodsNo"><span>{{item.order_no}}</span><span class="goodsStatus">{{item.view_status}}</span></p>
                                <ul style="margin-bottom: 15px;padding: 0 4vw;">
                                    <li v-for="(item1,index1) in item.orderdetail" :key="index1" class="orderDetail">
                                        <span class="goodsImg"><img :src="item1.img" alt=""></span>
                                        <div class="goodsText">
                                            <p class="goodsName">{{item1.goods_name}}</p>
                                            <p class="goodsSpec">{{item1.spec_array}}</p>
                                            <p class="artNo">货号：{{item1.goods_no}}</p>
                                            <span class="goodsNum">X{{item1.goods_nums}}</span>
                                        </div>
                                    </li>
                                    <p class="orderTime">下单时间：{{item.create_time}}</p>
                                </ul>
                            </div>
                        </li>
                    </ul>    
                </van-tab>
            </van-tabs>
        </pull-to>
        
    </div>
</template>
<script>
import PullTo from 'vue-pull-to';
import request from "@/request/index.js"
export default {
    components:{
        PullTo
    },
    data(){
        return{
            data:{list:[]},
            type:['全部','待调货','调货中','待提货','已提货'],
            page:1,
            keys:'',
            active: 0,
            status:1,
            isAll:false,
            BOTTOM_DEFAULT_CONFIG: {
                pullText: "上滑继续加载",
                triggerText: "释放更新",
                loadingText: "加载中,请稍后",
                doneText: "内容已全部展示了",
                failText: "加载失败",
                loadedStayTime: 1000,
                stayDistance: 50,
                triggerDistance: 50,
            },
        }
    },
    watch:{
        active(nVal,oVal){
            // this.status=nVal+1;
            // this.data.list=[];
            // this.page=1;
            // // this.$router.push({path: '/mentionList?status='+this.status});
            // this.$store.commit('metionChange',nVal)
            // request.selfOrderIndex(this);
        },
        // '$route'(to, from) {   
        //     // this.$router.go(0);   
        // }
    },
    methods: {
        activeChange(){
            this.status=this.active+1;
            this.data.list=[];
            this.page=1;
            this.$store.commit('metionChange',this.active)
            request.selfOrderIndex(this);
        },
        toNext: function (isChoice,order_no) {
            if(isChoice==1){
                this.$router.push({path: '/mentionDetail2?order_no='+order_no+'&type='+1})
            }else{
                this.$router.push({path: '/mentionDetail?order_no='+order_no})
            }
        },
        search:function(){
            this.page=1;
            this.data.list=[];
            request.selfOrderIndex(this);
        },
        infiniteHandler:function(loaded){
            this.page++;
            request.selfOrderIndex(this);
            if(!this.isAll){
                this.BOTTOM_DEFAULT_CONFIG.doneText = this.BOTTOM_DEFAULT_CONFIG.pullText;
                loaded("done");
            }else{
                this.BOTTOM_DEFAULT_CONFIG.doneText = "内容已全部展示";
                loaded("done");
                this.loaded = true;
            }
        },
    },
    mounted(){
        if(this.$store.state.metionActive){
            this.active=this.$store.state.metionActive;
            this.status=this.active+1;
        }
        
        if(this.$route.query.status){  
            this.status=this.$route.query.status;
            this.active=this.status-1;
        }
        request.selfOrderIndex(this);
    }
}
</script>
<style scoped lang="scss">
    .main-search{
        font-size: 0;
        width: 92vw;
        margin: 1vh auto;
        border-radius: 5px;
        overflow: hidden;
        height:5vh;
        input{
            font-size: 14px;
            width: 80%;
            text-indent: 20px;
            height: 100%;
            display: inline-block;
        }
        button{
            width: 20%;
            font-size: 14px;
            height: 100%;
            background:#1ABC9C;
            color:#ffffff;
            text-align: center;
            line-height: 28px;
            display: inline-block;
            border: 1px solid #1ABC9C;
        }
    }
    .dataList{
        margin-top: 15px;
        background: #ffffff;
        .goodsNo{
            line-height: 40px;
            font-size: 14px;
            padding: 0 4vw;
            border-bottom: 1px solid #f5f5f5;
            .goodsStatus{
                color:#1ABC9C;
                float:right;
            }
        }
        .orderDetail{
            margin-top: 15px;
            .goodsImg{
                width: 29%;
                height: 26.68vw;
                display: inline-block;
                img{
                    height: 100%;
                    width: 100%;
                }
            }
            .goodsText{
                width:66%;
                float: right;
                position: relative;
                .goodsName{
                    font-size: 13px;
                    color:#333333;
                    line-height: 18px;
                    overflow: hidden;
                    height: 36px;
                }
                .goodsSpec{
                    font-size: 12px;
                    color: #666666;
                    margin-top: 10px;
                    line-height: 17px;
                    height: 27px;
                }
                .artNo{
                    font-size: 12px;
                    color: #666666;
                    line-height: 17px;
                    margin-top: 10px;
                }
                .goodsNum{
                    color: #1ABC9C;
                    position: absolute;
                    right: 0px;
                    bottom: 10px;
                    font-size: 16px;
                }
            }
        }
        .orderTime{
            border-top: 1px solid #f5f5f5;
            line-height: 34px;
            color: #333333;
            font-size: 12px;
            margin-top: 15px;
        }
    }
</style>


